<template>
  <el-card class="box-card" shadow="hover" v-if="show">

    <template #header>
      <div class="card-header">
        <span>副本统计</span>
        <el-button class="button" style="float: right" @click="show = false" text><el-icon ><Close /></el-icon></el-button>
      </div>
    </template>
    <div :id="id" :class="className" :style="{ height, width }" />
  </el-card>
</template>

<script setup lang="ts">
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts';
import {Close} from "@element-plus/icons-vue";
import {onMounted, nextTick, computed, ref} from "vue";
import {count, dutyNumMap} from "@/data/service/logAnalysisService";

const props = defineProps({
  id: {
    type: String,
    default: 'duty bar',
  },
  className: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '800px',
  },
  value:{
    type: Object,
    default: new Map()
  }
});

const show = ref(true)

const height = computed(()=>{ return (dutyNumMap.size * 25 + 150)+'px' })

const option: EChartsOption = {
  dataset: [
    {
      dimensions: ['name', 'count'],
      source: [...dutyNumMap.entries()]
    },
    {
      transform: {
        type: 'sort',
        config: { dimension: 'count', order: 'asc' }
      }
    }
  ],
  tooltip: {
    show: true,
    formatter: (params:any) => {
      const percent = params.value[1]/count * 100
      return params.value[0] + ': ' + params.value[1] + '(' + percent.toFixed(2) + '%)'
    }
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "left",
    top: "bottom",
    feature: {
      saveAsImage: { show: true },  // 保存图表
    },
  },
  xAxis: {
    type: 'value',
  },
  yAxis: {
    type: 'category'
  },
  grid: {
    left: '30',
    containLabel: true,
  },
  series: {
    type: 'bar',
    label: {
      formatter: (params:any) => {
        const percent = params.value[1]/count * 100
        return params.value[1] + '(' + percent.toFixed(2) + '%)'
      },
      show: true,
      position: 'right'
    },
    itemStyle: {
      color: '#409EFF'
    },
    encode: { x: 'count', y: 'name' },
    datasetIndex: 1
  }
};

function initChart(){
  let chartDom = document.getElementById(props.id)!;
  let myChart = echarts.init(chartDom);
  myChart.setOption(option)
}


onMounted(()=>{
  nextTick(()=>{
    initChart()
  })
})
</script>

<style scoped>

</style>